<template>
  <chart :options="opts" :width="width" :height="height || '140px'"></chart>
</template>

<script>
import format from '../../filters/format-date'
export default {
  name: 'Gauge',

  props: ['width', 'height', 'options', 'seriesData', 'smooth', 'lineColor'],

  computed: {
    opts () {
      let data = this.seriesData || []
      let defaultOptions = {
        series: [
          {
            type: 'line',
            name: '',
            smooth: this.smooth,
            data: data.map(function (item) {
              return item.value
            }),
            // hoverAnimation: false,
            // symbolSize: 6,
            itemStyle: {
              normal: {
                color: this.lineColor || '#75a084'
              }
            },
            showSymbol: false
          }
        ],
        grid: {
          left: '10%',
          right: '10%',
          top: '10%',
          bottom: '30%'
        },
        xAxis: {
          type: 'category',
          data: data.map(function (item) {
            return item.date
          }),
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitNumber: 3,
          splitLine: {
            show: false
          }
        }
      }

      return _.merge({}, defaultOptions, this.options)
    },
    xAxisDate () {
      let data = this.seriesData || []

      let dateArr = []
      // 7天的时间轴以钟为刻度
      for (let i = 1, len = 24 * 7; i <= len; i++) {
        let xDate = format(new Date(new Date().getTime() - 1000 * 60 * 60 * i), 'MM-dd hh')
        dateArr.unshift(xDate)
      }

      // 将传过来的数据过滤成MM-dd hh的格式
      // 得到{时间，值}
      let dataArr = data.map(function (item) {
        let xDataDate = format(item.date, 'MM-dd hh')
        let xDataValue = item.value
        let obj = {xDataDate, xDataValue}
        return obj
      })

      let arry = []
      dateArr.forEach((element, index) => {
        dataArr.forEach(item => {
          if (!arry[index]) {
            if (element === item.xDataDate) {
              arry[index] = (item.xDataValue)
            } else {
              arry[index] = null
            }
          }
        })
      })

      return [dateArr, arry]
    }
  }
}
</script>

<style lang="css">
</style>
